<%@ page contentType="text/html;charset=UTF-8" %>
<%@ include file="../include/tag.jsp" %>
<!DOCTYPE html>
<html lang="zh">
<head>
    <title>绑定商户信息</title>
    <%@include file="../include/commonFile.jsp" %>
    <%--<link rel="stylesheet" href="${ctx}/css/common/list.css">--%>
    <link rel="stylesheet" href="${ctx}/css/ui/system/member/member_form.css">
    <style type="text/css">
        #headImg_img.cover-img {
            width: 80px !important;
            height: 80px !important;
        }

        #qrUrl_img.cover-img {
            width: 150px !important;
            height: 150px !important;
        }

        .layui-tab-brief > .layui-tab-title .layui-this {
            color: #e8473f !important;
        }

        .layui-tab-brief > .layui-tab-title .layui-this:after {
            border-bottom-color: #e8473f !important;
        }

        #mchForm .layui-form-item .layui-input-inline {
            width: 280px !important;
        }
    </style>
</head><body>
<!--头部-->
<%@include file="../include/header.jsp" %>
<div class="index-outside">
    <%@include file="../include/sidebar.jsp" %>
    <!--内容-->
    <section>
        <div class="section-main">
        <form id="mchForm" class="layui-form mt20" method="post" action="${ctx}/wechat/merchants/save.do">
            <input type="hidden" name="id" value="${wechatMerchants.id}"/>
        <div class="layui-form-item">
            <div class="layui-inline">
                <label class="layui-form-label">商户号名称<span class="f-verify-red">*</span></label>
                <div class="layui-input-inline">
                    <input type="text" class="layui-input" name="merchantName" lay-verify="commonReg" placeholder="商户号名称" value="${wechatMerchants.merchantName}"/>
                </div>
            </div>
        </div>
        <div class="layui-form-item">
            <div class="layui-inline">
                <label class="layui-form-label">商户号ID<span class="f-verify-red">*</span></label>
                <div class="layui-input-inline">
                    <input type="text" class="layui-input" id="merchantId" name="merchantId" lay-verify="commonReg" placeholder="商户号ID" value="${wechatMerchants.merchantId}"/>
                </div>
            </div>
        </div>
        <div class="layui-form-item">
            <div class="layui-inline">
                <label class="layui-form-label">商户号ApiKey<span class="f-verify-red">*</span></label>
                <div class="layui-input-inline">
                    <input type="text" class="layui-input" name="merchantApiKey" lay-verify="commonReg" placeholder="商户号ApiKey" value="${wechatMerchants.merchantApiKey}"/>
                </div>
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">商户证书<span class="f-verify-red">*</span></label>
            <div class="cover-content">
                <div class="layui-input-inline">
                    <input type="text" id="certUrl" name="certUrl" class="layui-input"  lay-verify="commonReg" value="${wechatMerchants.certUrl}" readonly/>
                </div>
                <div class="u-single-upload">
                    <input type="file"class="u-single-file" id="cert"> <span class="u-single-upload-icon">+上传</span>
                </div>
                <div class="form-word-aux">.p12 文件</div>
            </div>
        </div>
        <div class="layui-form-item">
            <div class="layui-input-block">
                <a href="javascript:void(0)" class="layui-btn layui-btn-danger" lay-submit lay-filter="mchForm">立即保存</a>
                <a href="${ctx}/wechat/merchants/list.do" class="layui-btn layui-btn-primary">取消</a>
            </div>
        </div>
        </form>
<%@include file="../include/footer.jsp" %>
</section>
</div>

<script type="text/javascript" src="${ctxStatic}/cos-js-sdk-v4-master/dist/cos-js-sdk-v4.js"></script>
<script type="text/javascript" src="${ctx}/script/upload/cosUploadUtil.js"></script>
<script>
    $(function () {

        var cosUtil = new CosUtil({
            mainFolder: "/cert/",
            bucketType: 1,// 0: 图片, 1: 文件
            insertOnly: 0,//insertOnly==0 表示允许覆盖文件 1表示不允许
            onProgress: function (file, ret) {

            }
        }).init();

        layui.use(['form', 'laydate', 'element'], function () {
            var form = layui.form, laydate = layui.laydate, element = layui.element;

            //自定义验证规则
            form.verify({
                commonReg: function (value) {
                    var regex = /^[^\s]+$/;
                    if (value == "") {
                        return "信息不能为空";
                    } else if (!regex.test(value)) {
                        return "不能包含空格";
                    }
                }
            });

            //监听提交 绑定商户信息
            form.on('submit(mchForm)', function (data) {
                txz.submitObject(data.elem, function (callBack) {
                    var action = $("#mchForm").attr("action");
                    $.post(action, $('#mchForm').serialize(), function (res) {
                        typeof callBack === 'function' && callBack();
                        if (res.success) {
                            util.layerMsgSuccess("商户信息保存成功", function () {
                                window.location.href = "${ctx}/wechat/merchants/list.do";
                            });
                        }
                        else {
                            util.layerMsgError(res.description)
                        }
                    });
                })
                return false;
            });
        });

        $('#cert').change(function () {
            var merchantId = $('#merchantId').val();
            merchantId = $.trim(merchantId);
            if (!util.isValid(merchantId)){
                util.layerMsgError('请先填写商户号')
                return;
            }
            var files = document.getElementById("cert").files;
            var newFiles = new Array(1);
            newFiles[0] = files[0];

            var fileName = files[0].name;
            if (fileName.lastIndexOf(".p12") < 0) {
                util.layerMsgError("请正确上传.p12格式的证书");
                return;
            }
            cosUtil.opt.mainFolder = cosUtil.opt.mainFolder +  merchantId + "/";

            // 查看证书是否已经存在
            cosUtil.opt.onSuccess = function (file, result) {
                layer.confirm('该文件已经存在, 确定要覆盖吗?', { icon: 3, title:'提示' }, function(index){
                    layer.close(index);
                    uploadCert(newFiles);
                });
            };
            cosUtil.opt.onFailure = function (file, result) {
                uploadCert(newFiles);
            }
            cosUtil.getFileStat(newFiles[0]);

        });

        function uploadCert(newFiles) {
            // 上传证书
            cosUtil.opt.onSuccess = function (file, result) {
                $("#certUrl").val(result.data.access_url);
                util.layerMsgSuccess("证书上传成功");
                console.log(result);
            };
            cosUtil.opt.onFailure = function (file, result) {
                util.layerMsgError("证书上传失败");
                console.log(result);
            }
            cosUtil.uploadFile(newFiles);
        }
    });

</script>
</body>
<script type="text/javascript">
    txz.initHeader({
        nav:[{
            name: '微信商户管理',
            href: '${ctx}/wechat/merchants/list.do'
        },{
            name: '${wechatMerchants.id == null? '发布' : '编辑'}',
            curr: true
        }],
        btns:[{
            name: '返回',
            href: 'javascript:history.back();',
            icon: 'back'
        }]
    });
</script>
</html>